<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#showTable {
				width: 400px;
				height: 280px;
				margin: 100px auto;
				
			}
			
			table,
			th,
			td {
				border: 1px solid gainsboro;
				border-collapse: collapse;
			}
			th{
				color: white;
				background: dodgerblue;
			}
			
			td {
				text-align: center;
				
			}
			
			table tr:nth-child(even) {
				background: grey;
			}
			table tr:nth-child(odd) {
				background: darkgray;
			}
			 table tr:hover{
				background:white;
			}
		</style>
	</head>

	<body>
		<table id="showTable">
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>课程</th>
				<th>成绩</th>
			</tr>

			<tr>
				<td>1</td>
				<td>吕不韦</td>
				<td>语文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>2</td>
				<td>吕布</td>
				<td>日语</td>
				<td>100</td>
			</tr>
			<tr>
				<td>3</td>
				<td>吕蒙</td>
				<td>营销学</td>
				<td>100</td>
			</tr>
			<tr>
				<td>4</td>
				<td>呂尚</td>
				<td>数学</td>
				<td>100</td>
			</tr>
			<tr>
				<td>5</td>
				<td>呂智</td>
				<td>英文</td>
				<td>100</td>
			</tr>
			<tr>
				<td>6</td>
				<td>呂域</td>
				<td>法语</td>
				<td>100</td>
			</tr>
		</table>
		
		<script>
			var show = document.getElementsByTagName("td");
			show.onmouseover = function(){
				
			}
			
		</script>
	</body>

</html>